<template>
    <v-list class="pt-0 pb-0" dense>
        <TreeItem
                class="item" :model="model" v-for="(model, index) in db" :key="index"
                :url="url"
                :isEdit="isEdit"
                :nodes="nodes"
                @handleAdd="handleAdd"
                @handleEdit="handleEdit"
                @handleDelete="handleDelete"
                @handleClick="handleClick"
        />
    </v-list>
</template>

<script>
    import TreeItem from './TreeItem';

    export default {
        name: "vTree",
        props: {
            url: String,
            isEdit: {
                type: Boolean,
                default: false
            },
            treeData: {
                type: Array
            }
        },
        data() {
            return {
                // 分类级别数据
                db: [],
                nodes: {
                    opened: null,
                    selected: {isSelected: false}
                }
            }
        },
        components: {
            TreeItem
        },
        created() {
            if (this.treeData && this.treeData.length > 0) {
                this.db = this.treeData;
                return;
            }
            // 没有数据进行查询
            this.getData();
        },
        methods: {
            getData() {
                // 从一级目录开始查（pid=0）
                this.$http.get(this.url, {params: {pid: 0}}).then(resp => {
                    this.db = resp.data;
                    this.db.forEach(n => n['path'] = [n.name])
                })
            },
            handleAdd(node) {
                this.$emit("handleAdd", node);
            },
            handleEdit(id, name) {
                this.$emit("handleEdit", id, name)
            },
            handleDelete(id) {
                this.deleteById(id, this.db);
                this.$emit("handleDelete", id);
            },
            handleClick(node) {
                this.$emit("handleClick", this.copyNodeInfo(node))
            },
            // 根据id删除
            deleteById(id, arr) {
                let src = arr || this.db;
                for (let i in src) {
                    let d = src[i];
                    if (d.id === id) {
                        src.splice(i, 1)
                        return;
                    }
                    if (d.children && d.children.length > 0) {
                        this.deleteById(id, d.children)
                    }
                }
            },
            copyNodeInfo(node) {
                const o = {};
                for (let i in node) {
                    o[i] = node[i];
                }
                return o;
            }
        },
        watch: {}
    }
</script>

<style scoped>
    .item {
        cursor: pointer;
    }
</style>
